<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
<head>
    <title>云起CRU | 左侧页面样例</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico">

    <!-- Web Fonts -->
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin">

    <!-- CSS Global Compulsory -->
    <link rel="stylesheet" href="__UNIFY__/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="__UNIFY__/css/style.css">

    <!-- CSS Header and Footer -->
    <link rel="stylesheet" href="__UNIFY__/css/headers/header-v7.css">
    <link rel="stylesheet" href="__UNIFY__/css/footers/footer-v1.css">

    <!-- CSS Implementing Plugins -->
    <link rel="stylesheet" href="__UNIFY__/plugins/animate.css">
    <link rel="stylesheet" href="__UNIFY__/plugins/line-icons/line-icons.css">
    <link rel="stylesheet" href="__UNIFY__/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="__UNIFY__/plugins/scrollbar/css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="__UNIFY__/plugins/owl-carousel/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="__UNIFY__/plugins/fancybox/source/jquery.fancybox.css">    

    <!-- CSS Theme -->
    <link rel="stylesheet" href="__UNIFY__/css/theme-colors/default.css" id="style_color">
    <link rel="stylesheet" href="__UNIFY__/css/theme-skins/dark.css">

    <!-- CSS Customization -->
    <link rel="stylesheet" href="__UNIFY__/css/custom.css">
</head> 

<body>
	<!--=== 样式转换 ===-->    
	<i class="style-switcher-btn fa fa-cogs hidden-xs"></i>
	<div class="style-switcher animated fadeInRight">
	    <div class="style-swticher-header">
	        <div class="style-switcher-heading">样式转换</div>            
	        <div class="theme-close"><i class="icon-close"></i></div>
	    </div>
	    <div class="style-swticher-body">
	        <!-- Theme Skins -->
	        <div class="style-switcher-heading">主题皮肤</div>
	        <div class="row no-col-space margin-bottom-20 skins-section">
	            <div class="col-xs-6">
	                <button data-skins="default" class="btn-u btn-u-xs btn-u-dark btn-block active-switcher-btn handle-skins-btn">浅色</button>
	            </div>
	            <div class="col-xs-6">
	                <button data-skins="dark" class="btn-u btn-u-xs btn-u-dark btn-block skins-btn">深色</button>
	            </div>
	        </div>            
	        <hr>
	        <!-- Layout Styles -->
	        <div class="style-switcher-heading">布局样式</div>
	        <div class="row no-col-space margin-bottom-20">
	            <div class="col-xs-6">
	                <a href="javascript:void(0);" class="btn-u btn-u-xs btn-u-dark btn-block active-switcher-btn wide-layout-btn">宽屏</a>                
	            </div>
	            <div class="col-xs-6">
	                <a href="javascript:void(0);" class="btn-u btn-u-xs btn-u-dark btn-block boxed-layout-btn">窄屏</a>                
	            </div>
	        </div>            
	    </div>
	</div><!--/style-switcher-->   

<div class="wrapper">
    <!--=== Header v7 Left ===-->
    <div class="header-v7 header-left-v7">
        <nav class="navbar navbar-default mCustomScrollbar" role="navigation" data-mcs-theme="minimal-dark">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="menu-container">
                <!-- Toggle get grouped for better mobile display -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- End Toggle -->

                <!-- Logo -->
                <div class="logo">
                    <a href="index.html">
                        <img id="logo-header" src="__UNIFY__/img/logo1-default.png" alt="Logo">
                    </a>
                </div>
                <!-- End Logo -->
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                <div class="menu-container">
                    <ul class="nav navbar-nav">
                        <!-- Home -->
                        <li class="dropdown active">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                                Home
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="index.html">Option 1: Default Page</a></li>
                                <li><a href="page_home8.html">Option 4: Home Discover</a></li>
                                <li><a href="page_home9.html">Option 5: Home Creative</a></li>
                                <li><a href="page_home10.html">Option 6: Home Inspire</a></li>
                                <li><a href="page_home11.html">Option 7: Home Desire</a></li>
                                <li><a href="page_jobs.html">Option 8: Home Jobs</a></li>
                                <li><a href="page_home3.html">Option 9: Amazing Content</a></li>
                            </ul>
                        </li>
                        <!-- End Home -->

                        <!-- About Pages -->                        
                        <li class="dropdown">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                                About
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="page_about2.html">About Us </a></li>
                                <li><a href="page_about3.html">About Us 1</a></li>
                                <li><a href="page_about1.html">About Us 2</a></li>
                                <li><a href="page_about.html">About Us 3</a></li>
                                <li><a href="page_about_me.html">About Me </a></li>
                            </ul>
                        </li>
                        <!-- End About Pages -->

                        <!-- Blog -->
                        <li class="dropdown">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                                Blog
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="blog_large_right_sidebar1.html">Right Sidebar</a></li>
                                <li><a href="blog_large_left_sidebar1.html">Left Sidebar</a></li>
                                <li><a href="blog_large_full_width1.html">Full Width</a></li>
                            </ul>
                        </li>
                        <!-- End Blog -->

                        <!-- Contacts -->
                        <li class="dropdown">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                                Contacts
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="page_contact1.html">Contacts Default</a></li>
                                <li><a href="page_contact2.html">Contacts Option 1</a></li>
                                <li><a href="page_contact3.html">Contacts Option 2</a></li>
                                <li><a href="page_contact4.html">Contacts Option 3</a></li>
                                <li><a href="page_contact_advanced.php">Contacts Advanced</a></li>
                            </ul>
                        </li>                    
                        <!-- End Contacts -->

                        <!-- Misc Pages -->
                        <li class="dropdown">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                                Misc
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="page_misc_blank.html">Blank page</a></li>
                                <li><a href="page_misc_boxed.html">Boxed Page</a></li>
                                <li><a href="page_misc_boxed_img.html">Boxed Image Page</a></li>
                            </ul>
                        </li>                    
                        <!-- End Misc Pages -->
                    </ul>

                    <ul class="list-inline header-socials">
                        <li><a href="'#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="'#"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="'#"><i class="fa fa-twitter"></i></a></li>
                    </ul>
                    <p class="copyright-text">&copy; 2015 CRU云起. 版权所有.</p>
                </div>  
            </div>
            <!-- End Navbar Collapse -->
        </nav>
    </div>    
    <!--=== End Header v7 Left ===-->

    <!--=== Content Side Left Right ===-->
    <div class="content-side-right">
        <!-- Interactive Slider -->
        <div class="interactive-slider-v1 img-v3">
            <div class="container">
                <h2>Welcome to CRU云起</h2>
                <p>CRU云起 is a clean and fully responsive incredible Template.</p>
            </div>
        </div>
        <!-- End Interactive Slider -->

        <!-- Content Boxes v6-->
        <div class="container content-sm">
            <div class="row">
                <div class="col-md-4 content-boxes-v6 md-margin-bottom-50">
                    <i class="rounded-x icon-link"></i>
                    <h1 class="title-v3-md text-uppercase margin-bottom-10">Fully responsive</h1>
                    <p>At vero eos et accusato odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
                </div>
                <div class="col-md-4 content-boxes-v6 md-margin-bottom-50">
                    <i class="rounded-x icon-paper-plane"></i>
                    <h2 class="title-v3-md text-uppercase margin-bottom-10">Modern design</h2>
                    <p>At vero eos et accusato odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
                </div>
                <div class="col-md-4 content-boxes-v6">
                    <i class="rounded-x icon-refresh"></i>
                    <h2 class="title-v3-md text-uppercase margin-bottom-10">Powerful slides</h2>
                    <p>At vero eos et accusato odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
                </div>
            </div><!--/row-->
        </div><!--/end container-->
        <!-- End Content Boxes v6 -->

        <!-- Container Part -->
        <div class="bg-color-light">
            <div class="container content-sm">
                <div class="row">
                    <div class="col-md-6 md-margin-bottom-50">
                        <img class="img-responsive" src="__UNIFY__/img/mockup/imac2.png" alt="">
                    </div>
                    <div class="col-md-6">
                        <br><br><br>
                        <div class="headline-left margin-bottom-30">
                            <h2 class="headline-brd">WE ARE CRU云起 AGENCY</h2>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p>
                        </div>
                        <ul class="list-unstyled lists-v2 margin-bottom-30">
                            <li><i class="fa fa-check"></i> Suspendisse eget augue non dolor ultrices</li>
                            <li><i class="fa fa-check"></i> Donec eget aliquet tortor, quis lacinia dolor</li>
                            <li><i class="fa fa-check"></i> Curabitur ut augue at mi eleifend lobortis</li>
                        </ul>
                        <a href="#" class="btn-u btn-brd btn-brd-hover btn-u-dark">Learn More</a>
                    </div><!--/end row-->
                </div>
            </div>
        </div>
        <!-- End Container Part -->

        <!-- Container Part -->
        <div class="container content-sm">
            <div class="headline-center margin-bottom-40">
                <h2>WHY WE ARE GOOD</h2>
                <p>Phasellus vitae ipsum ex. Etiam eu vestibulum ante. <br>
                Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit. Morbi libero libero, imperdiet fringilla </p>                
            </div>

            <div class="row">
                <div class="col-md-6 content-xs md-margin-bottom-50">
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p><br>
                    <a href="#" class="btn-u btn-brd btn-brd-hover btn-u-dark margin-right-10">Read More</a>
                    <a href="#" class="btn-u">Purchase Now</a>
                </div>

                <!-- Smallest Progress Bar -->
                <div class="col-md-6 progress-box">
                    <h3 class="heading-xs">Web Design <span class="pull-right">88%</span></h3>
                    <div class="progress progress-u progress-xxs">
                        <div class="progress-bar progress-bar-u" role="progressbar" data-width="88">
                        </div>
                    </div>

                    <h3 class="heading-xs">PHP/WordPress <span class="pull-right">76%</span></h3>
                    <div class="progress progress-u progress-xxs">
                        <div class="progress-bar progress-bar-u" role="progressbar" data-width="76">
                        </div>
                    </div>

                    <h3 class="heading-xs">HTML/CSS <span class="pull-right">97%</span></h3>
                    <div class="progress progress-u progress-xxs">
                        <div class="progress-bar progress-bar-u" role="progressbar" data-width="97">
                        </div>
                    </div>

                    <h3 class="heading-xs">Illustration <span class="pull-right">69%</span></h3>
                    <div class="progress progress-u progress-xxs">
                        <div class="progress-bar progress-bar-u" role="progressbar" data-width="69">
                        </div>
                    </div>
                </div>
                <!-- End Smallest Progress Bar -->
            </div><!--/end row-->
        </div>
        <!-- End Container Part -->

        <!-- Parallax Counter v4 -->
        <div class="parallax-counter-v4 parallaxBg" style="background-position: 50% 27px;">
            <div class="container content-sm">
                <div class="row">
                    <div class="col-md-3 col-xs-6 md-margin-bottom-50">
                        <i class="icon-cup"></i>
                        <span class="counter">265</span>
                        <h4>Coffee's Drunk</h4>
                    </div>
                    <div class="col-md-3 col-xs-6 md-margin-bottom-50">
                        <i class="icon-clock"></i>
                        <span class="counter">5957</span>
                        <h4>Working Hours</h4>
                    </div>
                    <div class="col-md-3 col-xs-6">
                        <i class="icon-emoticon-smile"></i>
                        <span class="counter">3495</span>
                        <h4>Happy Clients</h4>
                    </div>
                    <div class="col-md-3 col-xs-6">
                        <i class="icon-bulb"></i>
                        <span class="counter">576</span>
                        <h4>New Ideas</h4>
                    </div>
                </div><!--/end row-->
            </div><!--/end container-->
        </div>
        <!-- End Parallax Counter v4 -->

        <!-- Image Gallery -->
        <div class="container-fluid">
            <div class="container content-sm">
                <div class="text-center">
                    <h2 class="title-v2 title-center">PHOTO STREAM</h2>
                    <p class="space-lg-hor no-margin-bottom">If you are going to use a <span class="color-green">passage of Lorem Ipsum</span>, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making <span class="color-green">this the first</span> true generator on the Internet.</p>
                </div>
            </div>

            <div class="row no-gutter">
                <div class="col-sm-3 sm-margin-bottom-30">
                    <a href="__UNIFY__/img/main/img12.jpg" class="fancybox img-hover-v2" title="Image 1">
                        <span><img class="img-responsive" src="__UNIFY__/img/main/img12.jpg" alt=""></span>
                    </a>
                </div>
                <div class="col-sm-3 sm-margin-bottom-30">
                    <a href="__UNIFY__/img/main/img17.jpg" class="fancybox img-hover-v2" title="Image 2">
                        <span><img class="img-responsive" src="__UNIFY__/img/main/img17.jpg" alt=""></span>
                    </a>
                </div>
                <div class="col-sm-3 sm-margin-bottom-30">
                    <a href="__UNIFY__/img/main/img4.jpg" class="fancybox img-hover-v2" title="Image 3">
                        <span><img class="img-responsive" src="__UNIFY__/img/main/img4.jpg" alt=""></span>
                    </a>
                </div>
                <div class="col-sm-3">
                    <a href="__UNIFY__/img/main/img16.jpg" class="fancybox img-hover-v2" title="Image 4">
                        <span><img class="img-responsive" src="__UNIFY__/img/main/img16.jpg" alt=""></span>
                    </a>
                </div>
            </div>
        </div>
        <!-- End Image Gallery -->

        <!-- Call To Action -->
        <div class="call-action-v1 bg-color-green">
            <div class="container">
                <div class="call-action-v1-box">
                    <div class="call-action-v1-in">
                        <p class="color-light">CRU云起 creative technology company providing key digital services and focused on helping our clients to build a successful business on web and mobile.</p>
                    </div>
                    <div class="call-action-v1-in inner-btn page-scroll">
                        <a href="#portfolio" class="btn-u btn-brd btn-brd-hover btn-u-light btn-u-block">View Our Portfolio</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Call To Action -->

        <!-- Quote v2 -->
        <div class="container content">
            <div class="quote-v2">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh leo, cursus ut eros sit amet, fringilla vulputate diam. Fusce justo velit, venenatis at lectus in, laoreet suscipit arcu.</p>
                <span>John Clarck <a href="#">Google Inc.</a></span>
            </div>
        </div>
        <!-- End Quote v2 -->

        <!-- Owl Clients v1 -->
        <div class="bg-color-light">
            <div class="container content-sm">
                <div class="owl-clients-v1">
                    <div class="item">
                        <img src="__UNIFY__/img/clients4/1.png" alt="">
                    </div>
                    <div class="item">
                        <img src="__UNIFY__/img/clients4/2.png" alt="">
                    </div>
                    <div class="item">
                        <img src="__UNIFY__/img/clients4/3.png" alt="">
                    </div>
                    <div class="item">
                        <img src="__UNIFY__/img/clients4/4.png" alt="">
                    </div>
                    <div class="item">
                        <img src="__UNIFY__/img/clients4/5.png" alt="">
                    </div>
                    <div class="item">
                        <img src="__UNIFY__/img/clients4/6.png" alt="">
                    </div>
                    <div class="item">
                        <img src="__UNIFY__/img/clients4/7.png" alt="">
                    </div>
                    <div class="item">
                        <img src="__UNIFY__/img/clients4/8.png" alt="">
                    </div>
                    <div class="item">
                        <img src="__UNIFY__/img/clients4/9.png" alt="">
                    </div>
                </div>
            </div>    
        </div>
        <!-- End Owl Clients v1 -->
    </div>
    <!--=== End Content Side Left Right ===-->
</div><!--/wrapper-->

<!-- JS Global Compulsory -->			
<script type="text/javascript" src="__UNIFY__/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="__UNIFY__/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="__UNIFY__/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="__UNIFY__/plugins/back-to-top.js"></script>
<script type="text/javascript" src="__UNIFY__/plugins/jquery-appear.js"></script>
<script type="text/javascript" src="__UNIFY__/plugins/smoothScroll.js"></script>
<script type="text/javascript" src="__UNIFY__/plugins/jquery.parallax.js"></script>
<script type="text/javascript" src="__UNIFY__/plugins/counter/waypoints.min.js"></script>
<script type="text/javascript" src="__UNIFY__/plugins/counter/jquery.counterup.min.js"></script>
<script type="text/javascript" src="__UNIFY__/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="__UNIFY__/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="__UNIFY__/plugins/scrollbar/js/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="__UNIFY__/js/custom.js"></script>
<!-- JS Page Level -->           
<script type="text/javascript" src="__UNIFY__/js/app.js"></script>
<script type="text/javascript" src="__UNIFY__/js/plugins/fancy-box.js"></script>
<script type="text/javascript" src="__UNIFY__/js/plugins/progress-bar.js"></script>
<script type="text/javascript" src="__UNIFY__/js/plugins/owl-carousel.js"></script>
<script type="text/javascript" src="__UNIFY__/js/plugins/style-switcher.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
      	App.init();
        App.initCounter();
        App.initParallaxBg();
        App.initScrollBar();
        FancyBox.initFancybox();        
        App.initAnimateDropdown();
        OwlCarousel.initOwlCarousel();
        StyleSwitcher.initStyleSwitcher();
        ProgressBar.initProgressBarHorizontal();
    });
</script>
<!--[if lt IE 9]>
    <script src="__UNIFY__/plugins/respond.js"></script>
    <script src="__UNIFY__/plugins/html5shiv.js"></script>
    <script src="__UNIFY__/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->

</body>
</html>